<template>
	<view class="container">
		<u-sticky>
			<view class="tabs_box">
				<!-- 搜索栏优化：增加圆角、调整间距 -->
				<view class="tabs_box_search">
					<u-search :showAction="true" actionText="搜索" :animation="true" v-model="query.projectName"
						placeholder="请输入项目名称" @custom="getList(false)" @search="getList(false)" @clear="getList(false)"
						borderRadius="16rpx"></u-search>
				</view>
			</view>
		</u-sticky>

		<!-- 列表卡片优化：增加阴影、圆角、内边距 -->
		<view class="project-info-card" v-for="currentProject in list" :key="currentProject.projectId"
			@click="goPages(currentProject)">
			<view class="project-header">
				<text class="project-name">{{currentProject.projectName}}</text>
				<text class="project-code">编号：{{currentProject.projectNo}}</text>
			</view>
			<view class="project-meta">
				<view class="meta-item">
					<text class="meta-label">负责人：</text>
					<text class="meta-value">{{currentProject.projectLeaderName}}</text>
				</view>
				<view class="meta-item">
					<text class="meta-label">状态：</text>
					<text class="meta-value">
						<dicts-tag  :list="dictList['service_project_status']"
							:value="currentProject.productStatus"></dicts-tag>
					</text>
				</view>
				<view class="meta-item">
					<text class="meta-label">创建时间：</text>
					<text class="meta-value">{{currentProject.createTime}}</text>
				</view>
			</view>
		</view>
		<u-empty mode="list" style="padding-top: 100rpx;" text="暂无数据" v-if="!list.length">
		</u-empty>
	</view>
</template>

<script>
	import {
		getMyProductServiceListPage,
		getDicts
	} from "@/common/api.js"
	import dictsTag from "@/components/dictsTag.vue"
	export default {
		components: {
			dictsTag,
		},
		data() {
			return {
				query: {
					__page: 1,
					__limit: 10,
					projectName: '',
				},
				tabsList: [],
				loading: false,
				total: 0,
				list: [],
				currentIndex: 0,
				userInfo: null,
				isLeader: 0,
				roleKeys: null,
				dictList: {},
			}
		},

		onReachBottom() {
			if (this.query.__page * this.query.__limit < this.total) {
				this.loading = true
				this.$commonFn.debounce(this.getList, 500, true)
			} else {
				this.$commonFn.msg('已经到底了')
				this.loading = false
			}
		},
		onShow() {
			this.getDictsList('service_project_status')
			this.getList()
		},
		methods: {
			async getDictsList(dictType) {
				let res = await getDicts({
					dictType: dictType
				})
				if (res) {
					this.dictList[dictType] = res.data
				}
			},
			async getList(isRefresh = false) {
				this.loading = true
				if (isRefresh) {
					this.query.__page++
				} else {
					this.query.__page = 1
				}
				let res = await getMyProductServiceListPage({
					...this.query,
				})
				if (res && res.data) {
					if (isRefresh) {
						this.list = this.list.concat(...res.data.list)
					} else {
						this.list = res.data.list
					}
					this.total = res.data.totalCount
					this.loading = false
				}
				this.loading = false
			},

			handleConfirm(e) {
				this.getList()
			},

			goPages(item) {
				this.$commonFn.Navto(`./index?projectId=${item.projectId}`)
			}
		}
	}
</script>
<style scoped lang="scss">
	.container {
		padding-bottom: 32rpx;
		background-color: #f5f7fa; // 页面背景色，增强层次感
	}

	.tabs_box_search {
		padding: 16rpx 32rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.tabs_box {
		background-color: #fff;
		position: sticky;
		position: -webkit-sticky;
		top: 0;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05); // 顶部栏阴影
	}

	// 列表卡片样式
	.list_card {
		margin: 32rpx;
		background-color: #fff;
		padding: 32rpx;
		border-radius: 12rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08); // 卡片阴影
	}

	// 列表项样式
	.list_item {
		display: flex;
		justify-content: space-between;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #eee; // 分隔线
		margin-bottom: 20rpx;

		&:last-child {
			padding-bottom: 0;
			border-bottom: none;
			margin-bottom: 0;
		}

		&_left {
			font-weight: 500;
			color: #666;
			flex-shrink: 0;
			padding-right: 26rpx;
			// width: 150rpx;
		}

		&_right {
			color: #333;
			word-break: break-all;
		}
	}

	// 按钮样式
	.list_btn {
		display: flex;
		justify-content: center;
		margin-top: 32rpx;
	}

	// 按钮 hover 效果
	.btn_hover {
		opacity: 0.8;
		transform: scale(0.98);
		transition: all 0.2s ease;
	}

	// 覆盖 u-button 样式，保证宽度和高度一致性
	.list_btn ::v-deep .u-button {
		width: 160rpx !important;
		height: 80rpx !important;
		line-height: 80rpx !important;
		border-radius: 8rpx;
	}

	/* 项目信息卡片 */
	.project-info-card {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 25rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
		margin: 24rpx;
	}

	.project-header {
		margin-bottom: 20rpx;
	}

	.project-name {
		font-size: 34rpx;
		font-weight: 500;
		color: #333;
	}

	.project-code {
		display: block;
		font-size: 26rpx;
		color: #999;
		margin-top: 5rpx;
	}

	.project-meta {
		display: flex;
		flex-wrap: wrap;
		gap: 15rpx 30rpx;
	}

	.meta-item {
		display: flex;
		align-items: center;
	}

	.meta-label {
		font-size: 26rpx;
		color: #666;
	}

	.meta-value {
		font-size: 26rpx;
		color: #333;
	}

	.status-progress {
		color: #409EFF;
	}

	.status-finish {
		color: #52C41A;
	}

	.status-pause {
		color: #FAAD14;
	}
</style>